<template>
	<div class="detail">
      <div :class=" fixed ? 'detail_temp' : 'sort_block' " >
         <div class="go_back" @click="go_back" v-if="!isShare"></div>
         <div class="temp_menus">
            <div :class="[nth==0 ? 'on': '','menu']" @click="myroll(0,0)">商品
                <div class="line"></div>
            </div>
            <div :class="[nth==1 ? 'on': '','menu']" @click="myroll(mh1,1)">详情
                <div class="line"></div>
            </div>
            <div :class="[nth==2 ? 'on': '','menu']" @click="myroll(mh2,2)">推荐
              <div class="line"></div>
            </div>
         </div>
      </div>
      <div class="detail_go_home" @click="go_back" v-if="!isShare"></div>
      <div v-if="have" class="have"> 
          <div class="banner"   v-if="infor.small_images" >             
              <swiper :options="swiperOption" ref="swiperOption">
                <!-- slides -->
                <swiper-slide v-for="(picItem,index) in infor.small_images" :key="index">
                  <div class="swiper_wrap_img">
                    <img :src="picItem" :alt="index">
                  </div>
                </swiper-slide>
                <div class="swiper-pagination"  slot="pagination" ><span  v-for="(item,index) in infor.small_images" :key="index"></span></div>
              </swiper>
        <div class="detail_info">
          <div class="detail_info_con">
            <div class="info_price">
                <div class="info_quan">
                    <span class="price_now">¥{{infor.coupon_price}}</span>
                    <span class="price_old">¥ {{infor.zk_final_price}}</span>
                </div>   
                 <div class="info_sale">销量{{infor.volume}}</div>            
            </div>
            <div class="info_rebate" v-if="infor.reward_price!=='0'">
                <div class="info_reword">奖 ¥{{infor.reward_price}}</div>
                
            </div>
            <div class="info_title">{{infor.title}}</div>					 
          </div>	
        </div>		 
          </div>
      <div class="detail_line"></div>
      <div class="detail_arch">
        <div class="arch_info">
          <div class="arch_left">
            <div class="arch_num">可领券购买<span v-if="cups"  id="cp_code" class="arch_word">{{model}}</span></div>
            <div class="arch_time" >点击复制淘口令，打开【手机淘宝】购买</div>
          </div>
          <div class="arch_right" data-clipboard-target="#cp_code" @click="copy">复制<br/>淘口令</div>	
        </div>
      </div>
      <div class="detail_line"></div>
      <div class="detail_title"><span>—</span> 寻匠推荐 <span>—</span></div>
      <div class="detail_recom">
           <div class="recom_goods" v-for="(item,index) in recom" :key="index" @click="goDetail(item.id)">
              <img :src="item.pict_url">
              <div class="recom_cont">
                  <div class="recom_title" v-text="item.title"></div>
                  <div class="recom_info">
                      <div class="recom_aword">奖¥ {{item.reward_price}}</div>
                      <div class="recom_quan"><span>{{item.coupon_money}}</span>元券</div>
                  </div>
                  <div class="recom_price">
                        <div class="price_now"><small>¥</small> {{item.coupon_price}} <small>券后</small></div>
                        <div class="price_old">¥ {{item.zk_final_price}}</div>
                  </div>
              </div> 
          </div>                           
      </div>
      <div class="detail_line"></div>
      <div class="detail_buss">
        <div class="buss_left">
          <div class="buss_img"><img :src="infor.shop_img"></div>
          <!-- <div class="buss_exp">亮点</div> -->
        </div>
        <div class="buss_right">
          <div class="buss_name">{{infor.shop_title}}</div>
        </div>	
         <div class="buss_info">
            <div class="detail_bus_class">宝贝描述<span class="detail_bus_grade">{{infor.goods_score}}</span></div>
            <div class="detail_bus_class">卖家服务<span class="detail_bus_grade">{{infor.user_score}}</span></div>
            <div class="detail_bus_class">物流服务<span class="detail_bus_grade">{{infor.express_score}}</span></div>
        </div>
      </div>
      <div class="detail_line"></div>
      <div class="detail_title" ref="mh1"><span>—</span> 商品详情 <span>—</span></div>
      <div class="detail_content">
           <div v-for="(picItem,index) in infor.detail_img" :key="index"><img :src="'//'+picItem"></div>
      </div>
      <div class="detail_title see_title" ref="mh2"><span>—</span> 看了又看 <span>—</span></div>
      <div class="home_list">
            <div class="list_cont" >
                <div class="list_info" v-for="(item, index) in goods" :key="index">
                    <div v-if="item.type==2"  class="infor_img"  @click="goNews(item.id)">
                        <img :src="item.pict_url">
                    </div>
                    <div v-if="item.type==1"  @click="goDetail(item.id)">
                        <div class="list_img">
                            <img class="ocn_img" :src="item.pict_url">
                        </div>
                        <div class="list_menu">
                            <div class="list_title">{{item.title}}</div>
                            <div class="list_store"><span v-text="item.user_type==0?'淘宝':'天猫'" class="store_type"></span><span class="store_title"> {{item.shop_title}}</span></div>
                            <div class="quan_num">
                                <span class="quan_info"><span class="num">{{item.coupon_money}} </span> 元券</span>
                            </div>
                            <div class="list_rebate">
                                <div class="rebate_num">奖 ¥ {{item.reward_price}}</div>
                                <div class="list_sale">销量{{item.volume}}</div>  
                            </div> 
                            <div class="list_price">
                                    <div class="price_now"><small>¥</small> {{item.coupon_price}} <small>券后</small></div>
                                    <div class="price_old">¥ {{item.zk_final_price}}</div>
                            </div>
                              
                        </div>
                    </div>    
                </div>  
                <div v-if="load" class="loader">正在加载中...</div>  
                <div v-if="bottom" class="bottom">已经到底啦</div>  
          </div>
      </div> 
      <div class="under">
          <div class="under_icon fl">
                <ul>
                
                    <li @click="toHome">
                          <div class="icon_img">
                              <img src="/static/picture/gohome.png">
                          </div>
                          <div class="icon_exp">首页</div>
                    </li>
                  
                </ul>
          </div>
          <div class="under_copy fr" data-clipboard-target="#cp_code" @click="doCopy">一键复制淘口令</div>
          <div class="clear"></div>
      </div>
      </div>    
      <div v-if="nohave" class="nohave">
            <img src="/static/picture/detail_null.png">
            <div class="nohave_title">商品过期不存在</div>
      </div>
      <temp_top></temp_top>
	</div>
</template>
<script type="text/javascript" defer="true">
import  temp_top from './common.vue';
import $ from "jquery";
import Clipboard from 'clipboard'; 
export default {
		data() {
		    const that = this;
			return {
            swiperOption: {
                   //循环
                   loop: true,
                   //设定初始化时slide的索引
                   initialSlide: 0,
                   //自动播放
                   autoplay: {
                     delay:2000,
                     stopOnLastSlide: false,
                     /* 触摸滑动后是否继续轮播 */
                     disableOnInteraction: false
                   },
                   //滑动速度
                   speed:3000,
                   //滑动方向
                   direction: "horizontal",
                   //小手掌抓取滑动
                   grabCursor: true,
                   on: {
                     //滑动之后回调函数
                     slideChangeTransitionStart: function() {
                       /* realIndex为滚动到当前的slide索引值 */
                       that.imgIndex= this.realIndex - 1;
                     },
                   },
                   //分页器设置
                   pagination: '.swiper-pagination',
                   paginationClickable: true,
                },
                nohave:false, 
                have:false, 
                items: '',
                cups:false,
                item_id:0,
                model:"",
                token:"",
                fixed:"",
                scrollTop:"",
                nth:0,
                page:1,
                limit:20,
                load:false,
                bottom:false,
                mh1:0,
                mh2:0,
                goods:'',
                recom:"",
			}
		},
		props:{
			catList:Array 
		},
		mounted() {
      window.addEventListener('scroll', this.scrollToTop);
      //console.log(document.getElementById("mh1"))      
    },
    beforeDestroy() {
      window.removeEventListener("scroll", this.scrollToTop)
    },
    components:{
            "temp_top":temp_top,
    },
    computed: {
      isShare: function() {
        return location.href.indexOf("isShare=") !== -1;
      }
    },
    created(){
        this.item_id=this.$route.query.id; 
        this.getShare()
         if (localStorage.token) {
               this.token=localStorage.getItem('token');
               var params = new URLSearchParams();
               params.append('item_id',this.item_id); 
               this.$axios({
                    url:'/v1/tbk/tbkTpwdCreate',
                    method: 'post',
                    data:params,
                    headers:{
                      'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                      'Authorization':"bearer "+this.token
                    }
                  })
                  .then(respanse=>{
                      if(respanse.data.code==200){
                        var res=respanse.data.data;
                        this.cups=true;
                        this.model=res.model;
                      }
                  })
         }else{
           this.cups=false;
        }  
              //获取寻匠推荐
        this.$axios.get('/v1/common/itemAlgList',{
              params: {
                  type:2,
                  limit: 10,
                  page:1,
              },
          }).then(res => { 
              var result=res.data;
              if(result.code==200){
                this.recom=result.data;
              }else{
                  Toast(result.msg)
              }
        }, res => {
            console.log("error");
        });   
        this.$axios.get('/v1/common/itemList',{
              params: {
                  limit: 20,
                  page:1,
              }
          }).then(res => {
              var result=res.data;
              if(result.code==200){
                this.goods=result.data;
                this.scroll(this.goods);     
              }else{
                  Toast(result.msg)
              }
          }, res => {
              console.log("error");
          });
          this.getInfor(this.item_id);
    },
		methods: {
			go_back(){
          history.go(-1);
      },
      getShare() {
        var that = this;
        var params = new URLSearchParams();
        params.append("type", 3); //你要传给后台的参数值 key/value
        params.append("item_id", this.$route.query.id);
        this.$axios({
          url: "/v1/common/share",
          method: "post",
          data: params
        }).then(function(res) {
          let data = JSON.stringify(res.data.data);
          if (!that.$route.query.isShare) {
            var url = window.location.href + "&isShare=true";
          } else {
            var url = window.location.href;
          }
          that.wxShare.wxShowMenu(url, data);
        });
     },
     toHome() {
          if (this.$route.query.isShare) {
            this.$router.push({ path: "/", query: { isShow: true } });
          } else {
            this.$router.push({ path: "/" });
          }
      },
      myroll(e,f){
          let that = this
          that.scrollTop=e;
            if(e!==0){
               let positer = e-50
               $("html,body").animate({scrollTop: positer},500)
            }else{
               let positer = e
               $("html,body").animate({scrollTop: positer},500)
            }         
      },
        goDetail(e){
            this.$router.push({path:'/detail',query:{id:e}});
        }, 
        goNews(e){
            this.$router.push({path:'/news',query:{id:e}});
        },
       scrollToTop () {
          let that = this
          let mH1 = that.$refs.mh1.offsetTop;
          let mH2 = that.$refs.mh2.offsetTop;
          that.mh1=mH1;
          that.mh2=mH2;
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          let off1=this.mh1-60
          let off2=this.mh2-60
         
          that.scrollTop = scrollTop
          if (that.scrollTop > 100) {
            that.fixed = true
          } else {
            that.fixed = false
          }
          if(that.scrollTop>off1&&that.scrollTop<off2){
            that.nth=1;
          }
          if(that.scrollTop<off1){
            that.nth=0;
          }
          if(that.scrollTop>off2){
            that.nth=2;
          }
       },
      copy(){
          if (this.cups) {
                let clipboard = new Clipboard('.arch_right')
                clipboard.on('success',e =>{
                    Toast('复制成功')
                    clipboard.destroy()
                })
                clipboard.on('error', e => {
                    Toast('复制失败')
                    clipboard.destroy()
                })
            }else{
               Toast('请先登录')
               this.$router.push({path:'/center'}); 
            }
      },
      doCopy(){
          if (this.cups) {
                let clipboard = new Clipboard('.under_copy');
                clipboard.on('success',e =>{
                    Toast('复制成功')
                    clipboard.destroy()
                })
                clipboard.on('error', e => {
                    Toast('复制失败')
                    clipboard.destroy()
                })
            }else{
               Toast('请先登录')
               this.$router.push({path:'/center'}); 
            }
      },
       scroll(goods) {
            let flag = false;
            window.onscroll = () => {
                let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离
                let vh = document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight; // 浏览器视口的高度
                let height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); // 文档的总高度
                let bottomOfWindow =top + vh >= height;
                if(bottomOfWindow&&flag==false){
                    flag=true;
                    this.page++;
                        var that = this;
                        that.load=true;
                        var params = {
                                page: this.page,
                                limit:20,
                        }
                        this.$axios.get( //传参发起请求
                            '/v1/common/itemList', {
                            params
                            }
                        ).then(function (response) { //接口返回数据
                        var data=response.data.data;
                            if(data.length<=0){
                                that.bottom=true;
                                that.load=false;
                            }else{
                                for(var i =0;i<data.length;i++){
                                    goods.push(data[i]);
                                };
                                that.load=false;
                                flag=false;
                            }

                        }, response => {
                            console.log("error");
                        });
                    }
            }
        },  
        getInfor(e){
           this.$axios.get("/v1/common/itemDetail",{
                params:{
                  item_id:e
                },
                headers:{
                      'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                      'Authorization':"bearer "+this.token
                  }
            }).then(res => {
              console.log(res)
              if(res.data.code==200){
                this.have=true;
                var data=res.data.data;
                this.infor=data;
                document.title=this.infor.title;
                if(data.shop_img==""){
                  if (data.user_type == 1) {
                      this.infor.shop_img = "/static/picture/tmall.png";
                    } else {
                      this.infor.shop_img = "/static/picture/tbao.png";
                  }
                }
            }else{
              this.nohave=true;
            }    
          }, res => {
              console.log("error");
          });   
        }     
    },
    watch: {
      
      '$route' (to, from) { //监听路由是否变化
          this.$router.go(0);     
        //  if(this.$route.query.id){//判断id是否有值
        //       this.getInfor(this.$route.query.id)
        //   }
      }
    },

}
</script>

<style scoped>
@import '../../static/css/cover.css';
*{padding:0;margin:0;}
.banner{position:relative;}
.detail_go_home{width:60px;height:60px;border-radius:50%;background:url(/static/images/detail_go_back.png) no-repeat center center;background-size:100% 100%;opacity: 0.7;position:absolute;left:26px;top:58px;z-index:9999999;}
.banner img{width:100%;height:750px;overflow: hidden;}
.banner .swiper_wrap_img{height:0;padding-bottom:100%;}
.detail_info{width:100%;padding-top:34px;padding-bottom:26px;background:#FFF;border-radius:60px 60px 0 0;}
.detail_info .detail_info_con{width:698px;margin:0 auto;}
.detail_info_con .info_title{font-size:28px;color:#000000;font-weight:600;line-height:40px;margin-top:26px;max-height:80px;overflow: hidden;}
.detail_info_con .info_rebate{margin-top:18px;display: flex;justify-content:space-between;}
.info_rebate .info_reword{padding:0px 20px;text-align:center;border-radius:8px;background:#FFF289;line-height:56px;font-size:28px;color:#333334;font-weight:600;}
.detail_info_con .info_sale{font-size:24px;color:#9B9B9B;line-height:46px;}
.detail_info_con .info_price{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
.info_price .info_quan{display: flex;flex-wrap: wrap;justify-content:space-between;  justify-items: center;text-align: justify;}
.detail_info_con .info_price .price_exp{width:88px;height:32px;line-height:32px;border:2px solid #FE3B30;border-radius:4px;color:#FF0000;font-size:24px;text-align:center;margin-top:6px;}
.detail_info_con .info_price .price_now{font-size:36px;color:#FE3B30;font-weight:bold;padding-right:16px;}
.detail_info_con .info_price .price_old{color:#9B9B9B;font-size:28px;line-height:50px;text-decoration:line-through;padding-left:12px; }
.detail_line{background:#F8F8F8;width:100%;height:20px;}
.detail_arch{width:100%;padding-bottom:40px;}
.detail_arch .arch_info{width:698px;margin:0 auto;height:184px;background:url(/static/images/arch.png) no-repeat center center;background-size:100% 100%;margin-top:36px;  
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify;
  }
.detail_arch .arch_info .arch_left{padding-left:44px;}
.detail_arch .arch_info .arch_left .arch_num{font-size:44px;color:#FFFFFF;margin-top:36px;}
.arch_left .arch_num .arch_word{margin-left:10px;font-size:24px;}
.detail_arch .arch_info .arch_left .arch_time{font-size:24px;color:#FFF;margin-top:16px;}
.detail_arch .arch_info .arch_right{width:194px;font-size:36px;color:#333334;line-height:50px;text-align:center;padding-top:42px;}
.detail_buss{width:698px;margin:0 auto;padding-bottom:36px;padding-top:36px;  
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify;}
.detail_buss .buss_right{width:596px;}
.buss_left .buss_img{width:80px;height:80px;}
.buss_left .buss_img img{width:80px;height:80px;border-radius:50%;}
.buss_left .buss_exp{font-size:28px;color:#333334;font-weight:600;padding-left:12px;margin-top:12px;}
.buss_right .buss_name{font-size:28px;color:#000000;font-weight:bold;line-height:80px;}
.buss_right .detail_bus_class{color:#9B9B9B;font-size:24px;margin-right:18px;}
.buss_right .detail_bus_grade{color:#FF0000;}
.buss_right .buss_light{color:#9B9B9B;margin-top:20px;font-size:28px;line-height:44px;}
.detail_title{font-size:32px;color:#333334;width:100%;text-align:center;padding-top:40px;padding-bottom:16px;}
.buss_info{display:flex;margin-top:18px;justify-content:space-between;width:100%;font-size:28px;color:#9B9B9B;}
.buss_info span{color:#FE3B30;}
.detail_title span{color:#9B9B9B;}
.see_title{padding-bottom:40px;}
.detail_content img{width:100%;display: block;}
.detail_recom{margin-left:26px;margin-top:24px;padding-bottom:60px;display:flex;justify-content:flex-start;overflow-x:scroll;-webkit-overflow-scrolling: touch;}
.recom_goods{width:300px;background:#FBFBFB;padding-bottom:34px;margin-right:20px;}
.recom_goods img{width:100%;border-radius:20px 20px 0 0;}
.recom_cont{width:272px;margin:0 auto;}
.recom_title{font-size:28px;color:#000000;height:40px;overflow: hidden;width:244px;margin:0 auto;margin-top:16px;margin-bottom:20px;}
.recom_info{display:flex;justify-content:space-between;width:244px;margin:0 auto;margin-bottom:16px;align-items: center;}
.recom_aword{font-size:24px;color:#FE3B30;font-weight:bold;}
.recom_quan{color:#333334;font-size:18px;background:#FFE514;height:28px;}
.recom_quan span{color:#333334;font-size:20px;padding:0px 4px;border-radius:4px;}
.recom_price{display:flex;justify-content:space-around;height:60px;overflow: hidden;}
.recom_price .price_now{font-size:32px;color:#FE3B30;font-weight:bold;max-width:180px;}
.recom_price .price_now small{font-size:20px;}
.recom_price .price_old{color:#9B9B9B;font-size:20px;text-decoration:line-through;line-height:56px;margin-left:8px;}
.nohave{text-align:center;background:#F8F8F8;position: fixed;width:100%;height:100%;}
.nohave img{width:456px;height:420px;margin-top:400px;}
.nohave_title{color:#9B9B9B;font-size:28px;text-align:center;margin-top:20px;}
.under{width:100%;height:100px;background:#FFF;position: fixed;bottom:0;left:0;}
.under .icon_img{width:44px;height:44px;margin:0 auto;margin-top:16px;}
.under .icon_img img{width:100%;height:100%;}
.under .under_icon ul{display: flex;flex-direction: row;justify-content: space-between;width:155px;padding:0 20px;}
.under .under_icon ul a{text-decoration: none;}
.under .under_icon li{width:100%;text-align:center;}
.under .icon_exp{font-size:24px;color:#AAAAAA;}
.under .under_copy{width:555px;line-height:102px;background:#FFE514;color:#333334;font-size:32px;text-align:center;}
.temp_menus{display: flex;justify-content: space-between;margin:0 auto;}
.go_back{width:48px;height:48px;background:url(/static/images/team_go_back.png) no-repeat center center;background-size:100% 100%;margin-left:26px;}
.menu{font-size:32px;color:#333334;width:200px;text-align: center;}
.menu.on{font-weight:bold;}
.menu.on .line{width:68px;height:4px;background:#333334;margin:0 auto;margin-top:4px;border-radius:2px;}
.detail_temp{position:fixed;top:0;left:0;z-index:9999999;border-bottom:2px solid #F3F3F3;width:100%;background:#FFF;height:100px;display:flex;justify-content:flex-start;align-items: center;animation:mymove 0.8s;-webkit-animation:mymove 0.8s;}
@keyframes mymove{
  from {top:-100px;}
  to {top:0px;}
}
.sort_block{display: none;}
.home_list{width:100%;padding-bottom:100px;background:#F8F8F8;padding-top:26px;}
.home_list .super_top{margin-left:26px;}
.home_list .list_cont{width:704px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap: wrap;}
.list_info{width:340px;height:660px;background:#FFF;border-radius:24px;margin-bottom:24px;overflow: hidden;}
.list_info .ocn_img{width:100%;height:340px;}
.list_menu{width:330px;padding:0 0 0 10px;border-radius:32px 32px 24px 40px;background:#FFF;}
.list_title{color:#000000;height:76px;font-size:28px;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.list_store{color: #333334;font-size:24px;overflow: hidden;margin:12px 0;height:38px;}
.list_store .store_type{padding:0px 8px;text-align:center;font-size:18px;color:#fff;background:#FF2741;border-radius:4px;margin-right:8px;display: inline-block;}
.list_store .store_title{line-height:40px;margin:12px 0;height:40px;}
.list_rebate{font-size:24px;color:#FE3B30;margin-bottom:20px;display: flex;justify-content: space-between;}
.list_rebate .rebate_num{font-weight:bold;}
.list_price{display:flex;justify-content:flex-start;height:50px;overflow: hidden;}
.list_price .price_now{font-size:36px;color:#FE3B30;font-weight:bold;max-width:196px;}
.list_price .price_now small{font-size:20px;}
.list_price .price_old{color:#9B9B9B;font-size:20px;text-decoration:line-through;line-height:60px;margin-left:8px;}
.list_sale{font-size:24px;color:#9B9B9B;margin-right:18px;}
.list_quan span{font-size:32px;font-weight:bold;}
.quan_num{margin-bottom:18px;}
.quan_info{background:#FFE514;border-radius:4px;padding:2px 6px;font-size:18px;text-align: center;color:#333334;}
.quan_num span.num{font-size:20px;font-weight:bold;color:#333334;}
.loader{font-size:24px;line-height:80px;text-align: center;width:100%;}
.bottom{font-size:24px;line-height:80px;text-align: center;width:100%;}
</style>